<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排班管理 - 照护计划算法</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .elder-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .elder-card {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 15px;
            transition: transform 0.2s;
        }
        
        .elder-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .elder-card h3 {
            margin-top: 0;
            color: #1e88e5;
        }
        
        .elder-card p {
            margin: 5px 0;
            font-size: 14px;
        }
        
        .elder-card .actions {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        
        .elder-card .actions a {
            color: #1e88e5;
            text-decoration: none;
            font-size: 13px;
        }
        
        .elder-card .actions a:hover {
            text-decoration: underline;
        }
        
        .back-link {
            display: inline-block;
            margin: 20px 0;
            color: #1e88e5;
            text-decoration: none;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
        
        .generate-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            margin: 20px 0;
        }
        
        .generate-btn:hover {
            background-color: #388e3c;
        }
        
        .status-message {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        
        .status-message.loading {
            background-color: #e3f2fd;
            border: 1px solid #bbdefb;
            color: #1565c0;
        }
        
        .status-message.success {
            background-color: #e8f5e9;
            border: 1px solid #c8e6c9;
            color: #2e7d32;
        }
        
        .status-message.error {
            background-color: #ffebee;
            border: 1px solid #ffcdd2;
            color: #c62828;
        }
        
        .debug-info {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>排班管理</h1>
            <p>查看和生成照护计划</p>
        </header>

        <main style="display: block; padding: 20px;">
            <a href="/dashboard" class="back-link">← 返回控制台</a>
            
            <div class="card">
                <h2>生成排班</h2>
                <p>点击下面的按钮生成新的排班表。这个过程可能需要几分钟时间。</p>
                <div class="api-card" style="display: flex; gap: 15px; margin-bottom: 15px;">
                    <div style="flex: 1; background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                        <h3>GET方式生成排班</h3>
                        <p>点击下面的按钮，系统将生成排班并重定向到查看页面</p>
                        <a href="/generate_and_save_schedule" class="generate-btn" target="_blank">生成排班(GET)</a>
                    </div>
                    
                    <div style="flex: 1; background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                        <h3>POST方式生成排班</h3>
                        <p>点击下面的按钮，系统将生成排班并返回JSON结果</p>
                        <button type="button" onclick="generateSchedulePost()" class="generate-btn">生成排班(POST)</button>
                        <div id="generate-result" style="margin-top: 10px;"></div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <h2>老人排班列表</h2>
                <p>选择日期查看排班:</p>
                <div class="form-group">
                    <input type="date" id="schedule-date" onclick="this.showPicker()">
                    <button onclick="loadElders()">查看</button>
                </div>
                <div id="elder-list" class="elder-list">
                    <p>正在加载老人列表...</p>
                </div>
                <div id="debug-info" class="debug-info"></div>
                <button id="toggle-debug" style="margin-top: 10px; display: none;" onclick="toggleDebug()">显示/隐藏调试信息</button>
            </div>
        </main>

        <footer>
            <p>照护计划算法 &copy; 2025</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            loadElders();
        });
        
        // 加载老人列表
        function loadElders() {
            const dateInput = document.getElementById('schedule-date');
            let date = dateInput.value;
            
            const elderListContainer = document.getElementById('elder-list');
            elderListContainer.innerHTML = '<p>正在加载老人列表...</p>';
            
            // 先获取所有需要排班的老人
            fetch('/elders')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`获取老人列表失败: HTTP错误 ${response.status}`);
                    }
                    return response.json();
                })
                .then(elders => {
                    // 再获取指定日期的排班情况
                    let url = '/view_schedule';
                    const params = new URLSearchParams();
                    if (date) {
                        params.append('date', date);
                    }
                    if (params.toString()) {
                        url += '?' + params.toString();
                    }
                    return fetch(url)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`获取排班情况失败: HTTP错误 ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(schedules => {
                            return { elders, schedules };
                        });
                })
                .then(data => {
                    // 显示调试信息
                    const debugInfo = document.getElementById('debug-info');
                    debugInfo.textContent = JSON.stringify(data, null, 2);
                    document.getElementById('toggle-debug').style.display = 'block';
                    
                    const { elders, schedules } = data;
                    
                    if (!elders || elders.length === 0) {
                        elderListContainer.innerHTML = '<p>没有找到需要排班的老人</p>';
                        return;
                    }
                    
                    elderListContainer.innerHTML = '';
                    
                    elders.forEach(elder => {
                        const elderCard = document.createElement('div');
                        elderCard.className = 'elder-card';
                        
                        const hasSchedule = schedules && schedules[elder.elder] !== undefined;
                        
                        elderCard.innerHTML = `
                            <h3>老人 ID: ${elder.elder}</h3>
                            <p>排班状态: ${hasSchedule ? '已排班' : '未排班'}</p>
                            <div class="actions">
                                <a href="/view_schedule?elder=${elder.elder}${date ? '&date=' + date : ''}" target="_blank">查看排班(JSON)</a>
                                <a href="/elder.html?elder=${elder.elder}${date ? '&date=' + date : ''}" target="_blank">查看排班(页面)</a>
                                <a href="/download_schedule/${elder.elder}${date ? '?date=' + date : ''}" target="_blank">下载排班</a>
                            </div>
                        `;
                        
                        elderListContainer.appendChild(elderCard);
                    });
                })
                .catch(error => {
                    console.error('加载数据失败:', error);
                    elderListContainer.innerHTML = `<p class="status-message error">加载数据失败: ${error.message}</p>`;
                });
        }
        
        // 验证日期格式是否正确 (YYYY-MM-DD)
        function isValidDate(dateString) {
            const regex = /^\d{4}-\d{2}-\d{2}$/;
            if (!regex.test(dateString)) return false;
            
            const date = new Date(dateString);
            return date instanceof Date && !isNaN(date);
        }
        
        // 使用POST方式生成排班
        function generateSchedulePost() {
            const resultDiv = document.getElementById('generate-result');
            resultDiv.innerHTML = '<p class="status-message loading">正在生成排班，请稍候...</p>';
            
            fetch('/generate_and_save_schedule', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误 ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                resultDiv.innerHTML = `<p class="status-message success">排班生成成功！时间: ${data.date}</p>`;
                // 重新加载老人列表
                loadElders();
            })
            .catch(error => {
                resultDiv.innerHTML = `<p class="status-message error">生成排班失败: ${error.message}</p>`;
            });
        }
        
        // 切换显示调试信息
        function toggleDebug() {
            const debugInfo = document.getElementById('debug-info');
            debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none';
        }
    </script>
</body>
</html> 